<template>
	<div class="areapagecontainer">			              
		<!--搜索框-->
		<el-row>
		  <el-col :span="12">
		  	    <div :span="8">
				  <el-input placeholder="区域名称" v-model="areaname">		
					  	<el-button @click="searchArea" type="primary btn_user_defined" slot="append">				  		
					  		查询
					  	<i class="el-icon-search el-icon--right"></i>				  		
					   </el-button>	
				  </el-input>	
				  
                </div>
		  </el-col>
		  <el-col :span="12">
		  	<div class="toRight">
		  		<el-button @click="addArea" type="primary btn_add_defined" icon="el-icon-plus" plain></el-button>
		  	</div>
		  	
		  </el-col>
        </el-row>
        <!--列表-->
        <el-row style="margin-top:.2rem;">
            <template>
			  <el-table
			    :data="areatable"
			    style="width: 100%"	
			   
			    border>
			    <el-table-column
			      prop="areaname"
			      align="center"
			      
			      label="区域名称"
			      width="500">
			    </el-table-column>
			    <el-table-column
			      prop="state"				     		     
			      align="center"
			      label="状态"
			      width="500">		
			      <template slot-scope="scope">
			      	<button v-if="areatable[scope.$index].state===1" class="btn_self_defined btn_self_defined_del">废除</button>
			      	<button v-else-if="areatable[scope.$index].state===0" class="btn_self_defined btn_self_defined_default">正常</button>            		
                  </template>
			    </el-table-column>
			    <el-table-column
			      prop="operate"
			      align="center"
			      label="操作">
			      <template slot-scope="scope"> 			      	
			        <span class="btn_editor" >
			        	<i class="el-icon-edit"></i>
			        </span>			      					      		        
                  </template>
			    </el-table-column>
			  </el-table>
            </template>
        </el-row>
	    <!--分页-->
	    <el-row style="margin-top:.2rem">
	    	<el-pagination
			  background
			  layout="prev, pager, next"			 
			  :total="total"
			  @current-change="changePage"
			  >
			</el-pagination>
	    </el-row>	    
	    
	   	<!--弹出对话框-->
	   	<el-dialog
			   title="新增区域"
			   :visible.sync="boxshow"
			   width="30%"	
			   custom-class="el-dialog-bg"
			   :before-close="handleClose">
			<div class="addAreaBox">
				<div class="input-box">
					<input type="text" placeholder="区域名称" class="input-text" />
				</div>
				<div class="radio-box">
					<div class="state-text">状态</div>
					<div class="radio-text">
						<el-radio v-model="radio" label="1">正常</el-radio>
  						<el-radio v-model="radio" label="2">废除</el-radio>
					</div>
				</div>
			</div> 	
			<span slot="footer" class="dialog-footer">
			    <el-button @click="boxshow = false">取 消</el-button>
			    <el-button type="primary" @click="save">保存</el-button>
  			</span>
        </el-dialog>
	</div>
	
</template>

<script>
	
	export default{
		data(){
			return {
				areatable:[],
				boxshow:false,
				areaname:'',//搜索区域名称
				pageSize:5,
				total:100,
				currentPage:10,	
				inputAreaName:'',//新增区域名称
				radio:'1'								
			}
		},
		methods: {
		 //数据初始化加载
		 initData:function(){
		 	this.areatable=[
						{
				          areaname: '华南区',
				          state: 1	          
		                },{
				          areaname: '华南区',
				          state: 0       
		               },{
				          areaname: '华南区',
				          state: 1      
		               },{
				          areaname: '华南区',
				          state: 0      
		               },{
				          areaname: '华南区',
				          state: 1       
		               },{
				          areaname: '华南区',
				          state: 0       
		               },{
				          areaname: '华南区',
				          state: 0       
		               },{
				          areaname: '华南区',
				          state: 1       
		               },{
				          areaname: '华南区',
				          state: 1       
		               },{
				          areaname: '华南区',
				          state: 0       
		               }	
				]
		 },
		 //关闭对话框
	  	handleClose:function(done){
	  		done();
	  	},
		 //页数跳转
	     changePage:function(val){
	     	this.currentPage = val;	     
	     },
	     //搜索区域
	     searchArea:function(){
	     
	     },
	     //新增区域
	     addArea:function(){
	     	this.boxshow=true;
	     },
	     //确认保存
	     save:function(){	     	
	     	this.boxshow=false;
	     }
        },
        mounted:function(){
        	
        	this.initData();
        }
	}
	
</script>

<style lang="scss">
	.areapagecontainer{
		margin:0rem .2rem 0rem .2rem;
		padding:.2rem;
		box-shadow: 0.01rem 0.01rem 0.01rem 0.01rem #EFEFEF;
		background: #FFFFFF;
		.btn_user_defined{
		background-color: #3598DC !important;
		width:0.8rem !important;
		border-bottom-left-radius: 0px;
		border-top-left-radius: 0px;
		color: #FFFFFF !important;
	}
	.btn_add_defined{
		background-color: #3598DC !important;
		color: #FFFFFF;
	}
	.toRight{
		margin-right: 0px !important;
		float: right;		
	}
	.btn_self_defined{
		border: none;
		color: #FFFFFF;
	}
	.btn_self_defined_del{
		background: #FF5722;		
	}
	.btn_self_defined_default{
		background: #3598DC;
	}
	
		.addAreaBox{
			width:100%;
			height: 1rem;
			margin-top:-0.2rem;
			margin-bottom: -0.2rem;	
			background: #FFFFFF;
			padding:.1rem;
	        .input-box{
	        	
	        	width:50%;
	        	height: .4rem;
	        	float: left;
	        	margin-top:.3rem;
	        	.input-text{
	        		width:100%;
	        		height: 100%;
	        		font-size: .15rem;
	        		padding: 0px !important;
	        		border-top:none;
	        		border-bottom: 1px solid #dedede;
	        		border-right: none;
	        		border-left: none;
	        		outline:none;
	        		padding:0px !important ;
	        	}
	        	
	        }
	        .radio-box{        	
	        	width:50%;
	        	height: .7rem;
	        	float: left;
	        	margin-top:.15rem;
	        	.state-text{
	        		width:100%;
	        		height: .2rem;       		
	        		text-align: center;
	        		line-height: .2rem;
	        	}
	        	.radio-text{
	        		width:100%;
	        		height: .5rem;       		
	        		text-align: center;
	        		line-height: .5rem;
	        		
	        	}
	        }
		}
		.el-dialog-bg{
			background: #F4F5F6;
			
		}
	}
	

</style>